<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 放置结构内容 -->
        <TreeTool :tree-node="company" :is-root="true" @Dialog="changeShowDialog" />

        <!-- 树形图 -->
        <el-tree :data="list" :props="defaulrProps" :default-expand-all="true">
          <!--
            右侧的内容使用了插槽技术，插槽结构中使用slot-scope来接收数据
            slot-scope用于接收插槽传递过来的数据，el-tree会根据数据进行循环创建结构，slot-scope的值就是用于接收每一项的变量
           -->
          <!-- <el-row slot-scope="obj" type="flex" justify="space-between" align="middle" style="height: 40px ;width:100%" /> -->

          <TreeTool slot-scope="{data}" :tree-node="data" @delDepts="getDepartments" @Dialog="changeShowDialog" @editDepts="editDepts" />
        </el-tree>
      </el-card>
    </div>
    <!-- 弹出层组件 -->
    <AddDept ref="dept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import TreeTool from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    TreeTool,
    AddDept
  },
  data() {
    return {
      list: [],
      defaulrProps: {
        label: 'name'
      },
      company: {},
      showDialog: false, // 默认不显示弹出层
      node: null // 记录当前点击的节点
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {

    // 获取数据
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.list = tranListToTreeData(result.depts, '')
      console.log(result)
      // this.list = [...result.depts]
    },

    // 添加部门
    // node就是当前点击的部门
    changeShowDialog(node) {
      this.showDialog = true
      this.node = node
    },

    // 编辑部门
    editDepts(node) {
      this.showDialog = true
      this.node = node

      // 调用子组件的方法
      this.$refs.dept.getDepartDetail(node.id)
    }
  }
}
</script>

<style>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
